<%@ page contentType="text/html;charset=UTF-8"%>
<script src="${ctxStatic}/echartJs/echarts.min.js"></script>
<html id="idHtmlTemp">
<script type="text/javascript">
$(document).ready(function() {
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('mainQI'));
	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '质检一览',
			target: "self",
			left:'2%',
			textStyle: {
				//主标题文本样式
				fontWeight: 'normal',
				fontSize: 12
			}
		},
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			right:'3%',
			data:['通过','不通过','总数']
		},
		xAxis:  {
			type: 'category',
			boundaryGap: false,
			data:[
				<c:forEach items="${qualityList}" var="quality" varStatus='status'>
					<c:if test="${status.index != 0}">,</c:if>'${quality.qualityDate}'
				</c:forEach>]
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				formatter: '{value}'
			}
		},
		series: [
			{
				name:'通过',
				type:'line',
				data:[
					<c:forEach items="${qualityList}" var="quality">
						${quality.qualityCount - quality.qualityNoCount},
					</c:forEach>
				],
					
				markPoint: {
					data: [
						{type: 'max', name: '最大值'},
						{type: 'min', name: '最小值'}
					]
				},
				itemStyle:{
					normal:{
						color: "#008000" //图标颜色
					}
				}
			},
			{
				name:'不通过',
				type:'line',
				data:[
					<c:forEach items="${qualityList}" var="quality">
						${quality.qualityNoCount},
					</c:forEach>
					],
				markPoint: {
					data: [
						 {type: 'max', name: '最大值'},
						 {type: 'min', name: '最小值'}
					]
				},
				itemStyle:{
					normal:{
						color: "#FF0000" //图标颜色
					}
				}
			},
			{
				name:'总数',
				type:'line',
				data:[
					<c:forEach items="${qualityList}" var="quality">
						${quality.qualityCount},
					</c:forEach>
					],
				markPoint: {
					data: [
						{type: 'max', name: '最大值'},
						{type: 'min', name: '最小值'}
					]
				},
				itemStyle:{
					normal:{
						color: "#000000" //图标颜色
					}
				}
			}
		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
});
function jumpQuatity() {
	$($(".nav li").eq(1)).click();
	$('.cQuatity').find('a')[0].click();
}
</script>

<body>
	<div style="width:100%; height: 300px;">
		<%-- <div class="searchInp clearfix headerButton" style="margin-top: 10px;float: right; margin-right:10px;">
			<div class="timeBox">
				<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})"
					id="beginDateTemp" name="beginDateTemp" style="width: 110px" value="<fmt:formatDate value='${beginDate }' pattern='yyyy-MM-dd'/>">
				<p class="list">~</p>
				<input type="text" class="laydate-icon" id="endDateTemp"
					name="endDateTemp" style="width: 110px"
					onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})"value="<fmt:formatDate value='${endDate }' pattern='yyyy-MM-dd'/>">
				<button type="button" style="position: relative;top:2px;left: 5px;" onclick="searchQuantity(1)">检索</button>
				<button type="button" style="width:50px; position: relative;top:2px;left: 5px;" onclick="jumpQuatity()">质检</button>
			</div>
		</div> --%>
		<div class="clearfix" style="height: 300px;top: 50px;">
			<div id="mainQI" style="height: 330px; margin-top: 50px;"></div>
		</div>
	</div>
	<div id="scriptHtmlTemp">
		<script type="text/javascript">
	function scriptBackTemp(){
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('mainQI'));
		// 指定图表的配置项和数据
		var option = {
			title: {
				text: '质检一览',
				target: "self",
				left:'2%',
				textStyle: {
					//主标题文本样式
					fontWeight: 'normal',
					fontSize: 12
				}
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				right:'3%',
				data:['通过','不通过','总数']
			},
			xAxis:  {
				type: 'category',
				boundaryGap: false,
				data:[
					<c:forEach items="${qualityList}" var="quality" varStatus='status'>
						<c:if test="${status.index != 0}">,</c:if>'${quality.qualityDate}'
					</c:forEach>
				]
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					formatter: '{value}'
				}
			},
			series: [
				{
					name:'通过',
					type:'line',
					data:[
						<c:forEach items="${qualityList}" var="quality">
							${quality.qualityYesCount},
						</c:forEach>
					],
						
					markPoint: {
						data: [
							{type: 'max', name: '最大值'},
							{type: 'min', name: '最小值'}
						]
					},
					itemStyle:{
						normal:{
							color: "#008000" //图标颜色
						}
					}
				},
				{
					name:'不通过',
					type:'line',
					data:[
						<c:forEach items="${qualityList}" var="quality">
							${quality.qualityNoCount},
						</c:forEach>
						],
					markPoint: {
						data: [
							 {type: 'max', name: '最大值'},
							 {type: 'min', name: '最小值'}
						]
					},
					itemStyle:{
						normal:{
							color: "#FF0000" //图标颜色
						}
					}
				},
				{
					name:'总数',
					type:'line',
					data:[
						<c:forEach items="${qualityList}" var="quality">
							${quality.qualityCount},
						</c:forEach>
						],
					markPoint: {
						data: [
							{type: 'max', name: '最大值'},
							{type: 'min', name: '最小值'}
						]
					},
					itemStyle:{
						normal:{
							color: "#000000" //图标颜色
						}
					}
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}
	</script>
	</div>
</body>
</html>